<template>
	<view>
		<cu-custom bgColor="bg-gradual-green" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">院校选择</block>
		</cu-custom>
		
		<view class="cu-timeline">
			<view class="cu-time">
				<text class='cuIcon-selection text-white text-lg bg-green round padding-xs'></text>
				<text class='text-xl margin-left'>登录研招网</text>
			</view>
			<view class="cu-item text-green">
				<view class="content">
					<view class="cu-capsule radius">
						<view class="cu-tag bg-green">了解专业库</view>
						<view class="cu-tag line-green">计算机科学与技术</view>
					</view>
					<view class="margin-top">1.是否有跨考意愿</view>
					<view class="margin-top-sm">2.了解开设院校有哪些：几乎所有的高校</view>
					<view class="margin-top-sm">3.与计算机相关专业：软件工程等</view>
					<view class="margin-top-sm">4.初步确定满足条件的院校</view>
				</view>
			</view>
			
			<view class="cu-time">
				<text class='cuIcon-selection text-white text-lg bg-green round padding-xs'></text>
				<text class='text-xl margin-left'>自身意愿</text>
			</view>
			<view class="cu-item text-green">
				<view class="content">
					<view class="cu-capsule radius">
						<view class="cu-tag bg-green">缩小院校范围</view>
						<view class="cu-tag line-green">北上广</view>
					</view>
					<view class="margin-top">1.对地区有选择要求</view>
					<view class="margin-top-sm">2.是否为985或211</view>
					<view class="margin-top-sm">3.是否付出近80%努力能上岸</view>
					<view class="margin-top-sm">4.专业实力是否强硬</view>
				</view>
			</view>
			<view class="cu-time">
				<text class='cuIcon-selection text-white text-lg bg-green round padding-xs'></text>
				<text class='text-xl margin-left'>登录学校官网</text>
			</view>
			<view class="cu-item text-green">
				<view class="content">
					<view class="cu-capsule radius">
						<view class="cu-tag bg-green">重要步骤</view>
						<view class="cu-tag line-green">往死查</view>
					</view>
					<view class="margin-top">1.查询历年的招生简章和招生政策</view>
					<view class="margin-top-sm">2.查询历年的报录比和招生人数</view>
					<view class="margin-top-sm">3.查询专硕、学硕考试科目</view>
					<view class="margin-top-sm">4.查询官网示例题目</view>
					<view class="margin-top-sm">5.查询往年考察专业课知识范畴</view>
				</view>
			</view>
			<view class="cu-item text-green">
				<view class="content">
					<view class="cu-capsule radius">
						<view class="cu-tag bg-green">依旧重要步骤</view>
						<view class="cu-tag line-green">衡量、仔细衡量</view>
					</view>
					<view class="margin-top">1.报录比是否太大，超过10甚至20</view>
					<view class="margin-top-sm">2.推免比例是否过大，50、60%为标准</view>
					<view class="margin-top-sm">3.学硕与专硕是否考同样的科目</view>
					<view class="margin-top-sm">4.如果专硕考二，是否选择专硕</view>
				</view>
			</view>
			<view class="cu-time" style="padding-bottom: 140rpx;">
				<text class='cuIcon-selection text-white text-lg bg-green round padding-xs'></text>
				<text class='text-xl margin-left'>确认院校</text>
			</view>
		</view>
		<!-- 资讯按钮 -->
		<view class="cu-bar bg-white tabbar shop shadow edit-fixed">
			<button class="action text-gray text-shadow">
				<view class='cuIcon-community text-gray'>
				</view>
			</button>
			<view class="action text-gray text-shadow">
				<text class="text-sm">169人已咨询</text>
			</view>
			<view class='bg-gradual-green submit margin-left-xl text-xl'>
				<button class='button-no' open-type="contact" @contact="handleContact">
					<text class='text-white'>业务咨询</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: 1,
				current: 0,
				list: [{
						name: 'UI设计'
					},
					{
						name: '小程序/App'
					},
					{
						name: '网站开发'
					},
					{
						name: '行业解决方案'
					}
				],
				swiperCurrent: 0,
				dx: 0,
			};
		},
		onLoad() {
		},
		methods: {
			
		}
	};
</script>

<style lang="scss" scoped>
	/* #ifndef H5 */
	page {
		height: 100%;
		background-color: #f2f2f2;
	}

	/* #endif */
</style>

<style lang="scss" scoped>
	.cu-timeline .cu-time {
		width: 100%;
		text-align: left;
		padding: 20rpx 0 20rpx 37rpx;
		font-size: 26rpx;
		color: #888;
		display: block;
	}

	.text-red,
	.line-red,
	.lines-red {
		color: #FF3434;
	}

	.margin-avatar {
		margin-left: -15rpx;
	}

	.margin-avatar-bottom {
		margin-bottom: 150rpx;
	}

	.line-blue-tuniao::after {
		border-color: #0070ff !important;
		color: #0070ff;
	}

	.resume {
		/* background: #f1f1f1; */
		padding-top: 10rpx;
		border-radius: 6rpx;
		display: block;
		color: #666;
		line-height: 1.6;
	}

	.resume+.resume {
		margin-top: 20rpx;
	}

	.resume2 {
		padding-top: 10rpx;
		border-radius: 6rpx;
		display: block;
		color: #666;
		line-height: 1.6;
	}

	.edit {
		position: fixed;
		width: 100rpx;
		height: 100rpx;
		bottom: 250rpx;
		right: 30rpx;
		z-index: 1;
		opacity: 0.8;
		border: 1px solid #189eff;
		border-radius: 100rpx;
		box-shadow: 0rpx 0rpx 6rpx rgba(24, 158, 255, 1);
		padding: 20rpx;
	}

	.love {
		position: fixed;
		width: 100rpx;
		height: 100rpx;
		bottom: 550rpx;
		right: 30rpx;
		z-index: 1024;
		opacity: 0.8;
		border: 1px solid #189eff;
		border-radius: 100rpx;
		box-shadow: 0rpx 0rpx 6rpx rgba(24, 158, 255, 1);
		padding: 20rpx;
	}

	.bg-img-cont {
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		height: 350rpx;
	}

	.share-png {
		width: 100rpx;
		height: 100rpx;
		margin: 0 auto;
	}

	.share-wechat {
		width: 35rpx;
		height: 35rpx;
		margin: 0 10rpx -4rpx 0;
		opacity: 0.5;
	}

	.button-no::after {
		border: none;
	}

	.title-pyq {
		background-image: -webkit-linear-gradient(0deg, #1b6cff, #1ca5ff);
		/*1B6CFF 1B42FF*/
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		opacity: 0.5;
	}

	.edit-fixed {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 1024;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
	}

	.button-no {
		border: none;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0);
	}

	.centre {
		text-align: center;
		margin: 200rpx auto;
		font-size: 32rpx;

		image {
			width: 300rpx;
			border-radius: 50%;
			margin: 0 auto;
		}

		.tips {
			font-size: 24rpx;
			color: #999999;
			margin-top: 20rpx;
		}

		.btn {
			margin: 80rpx auto;
			width: 200rpx;
			border-radius: 32rpx;
			line-height: 64rpx;
			color: #ffffff;
			font-size: 26rpx;
			background: linear-gradient(270deg, #1cbbb4 0%, #0081ff 100%);
		}
	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}
</style>
